JavaScript Nullish Coalescing: Tildeling af Standardværdi vs. Håndtering af Falsy Værdier

JavaScript-udviklere har ofte brug for at tildele standardværdier til variabler, når den oprindelige værdi mangler eller er ugyldig. Traditionelt blev den logiske ELLER-operator (||) brugt til dette formål. Men nullish coalescing-operatoren (??), introduceret i ECMAScript 2020, giver en mere præcis og pålidelig løsning, især når man håndterer falsy værdier. Denne omfattende guide udforsker nuancerne i nullish coalescing, sammenligner den med den logiske ELLER-operator og demonstrerer dens anvendelse i forskellige scenarier.

Forståelse af Nullish Coalescing (??)

Nullish coalescing-operatoren (??) returnerer sin højre operand, når dens venstre operand er null eller undefined. Ellers returnerer den sin venstre operand. Med enklere ord giver den en standardværdi, kun når variablen er eksplicit null eller undefined.

Syntaks:

leftOperand ?? rightOperand

Eksempel:

            const name = null ?? "Guest";
console.log(name); // Output: "Guest"

const age = undefined ?? 25;
console.log(age); // Output: 25

const score = 0 ?? 100;
console.log(score); // Output: 0

            

              
                Copy
              
            
          

Forskellen mellem Nullish Coalescing (??) og Logisk ELLER (||)

Den logiske ELLER-operator (||) giver også en måde at tildele standardværdier på. Men den behandler enhver falsy værdi (false, 0, '', NaN, null, undefined) som værende lig med null eller undefined, hvilket potentielt kan føre til uventet adfærd.

Logisk ELLER Eksempel:

            const quantity = 0 || 10;
console.log(quantity); // Output: 10 (uventet, da 0 er falsy)

const message = '' || "No message";
console.log(message); // Output: "No message" (uventet, da '' er falsy)

            

              
                Copy
              
            
          

Nullish Coalescing Eksempel:

            const quantity = 0 ?? 10;
console.log(quantity); // Output: 0 (korrekt, da 0 ikke er null eller undefined)

const message = '' ?? "No message";
console.log(message); // Output: "" (korrekt, da '' ikke er null eller undefined)

            

              
                Copy
              
            
          

Som du kan se, udløses nullish coalescing-operatoren kun, når den venstre side er eksplicit null eller undefined, og bevarer derved falsy værdier som 0 og ''.

Anvendelsestilfælde for Nullish Coalescing

Nullish coalescing er særligt nyttig i scenarier, hvor du skal skelne mellem en manglende værdi (null eller undefined) og en gyldig falsy værdi.

1. Håndtering af konfigurationsindstillinger

Når man arbejder med konfigurationsindstillinger, kan man ønske at angive standardværdier for indstillinger, der ikke er blevet eksplicit defineret. Brug af ?? sikrer, at gyldige falsy værdier (f.eks. 0 for en timeout-værdi) ikke ved et uheld bliver erstattet med standardværdien.

            const config = {
  timeout: 0,
  maxRetries: null,
  apiEndpoint: undefined
};

const timeout = config.timeout ?? 5000; // Brug 0 hvis timeout er eksplicit sat, ellers brug 5000 som standard
const maxRetries = config.maxRetries ?? 3; // Brug 3 hvis maxRetries er null eller undefined
const apiEndpoint = config.apiEndpoint ?? "https://example.com/api"; //Brug standard endpoint hvis apiEndpoint er null eller undefined

console.log(`Timeout: ${timeout}, Max Retries: ${maxRetries}, API Endpoint: ${apiEndpoint}`);
// Output: Timeout: 0, Max Retries: 3, API Endpoint: https://example.com/api

            

              
                Copy
              
            
          

2. Arbejde med API-svar

API-svar indeholder ofte felter, der kan mangle eller have eksplicit angivne falsy værdier. Nullish coalescing giver dig mulighed for at håndtere disse scenarier elegant og sikrer, at du kun angiver standardværdier, når et felt reelt mangler.

Eksempel: Et forenklet API-svar, der repræsenterer en bruger:

            const user = {
  name: "Alice",
  age: 30,
  countryCode: null,
  acceptedTerms: false,
  profilePictureURL: undefined
};

const displayName = user.name ?? "Unknown User";
const userAge = user.age ?? "Age not available";
const country = user.countryCode ?? "US"; //Brug "US" som standard, hvis den er null/undefined
const hasAcceptedTerms = user.acceptedTerms ?? true; //Bruger true som standard, hvis den er null/undefined
const profilePic = user.profilePictureURL ?? "/default-profile.png"; //Standardbillede, hvis den er null/undefined

console.log(`Name: ${displayName}`); // Output: Name: Alice
console.log(`Age: ${userAge}`); // Output: Age: 30
console.log(`Country: ${country}`); // Output: Country: US
console.log(`Accepted Terms: ${hasAcceptedTerms}`); // Output: Accepted Terms: false
console.log(`Profile Picture: ${profilePic}`); //Output: Profile Picture: /default-profile.png

            

              
                Copy
              
            
          

I dette eksempel bruger vi "US" som standard kun, hvis `countryCode` er eksplicit `null` eller `undefined`. Hvis API'et returnerede `countryCode: ""`, ville den tomme streng blive bevaret, hvilket afspejler brugerens faktiske (men potentielt manglende) landekode.

3. Angivelse af fallback-værdier i funktioner

Når man skriver funktioner, der accepterer valgfrie parametre, kan nullish coalescing bruges til at angive standardværdier for manglende argumenter.

            function greet(name, greeting) {
  const displayName = name ?? "Guest";
  const salutation = greeting ?? "Hello";
  return `${salutation}, ${displayName}!`;
}

console.log(greet("Bob", "Good morning")); // Output: Good morning, Bob!
console.log(greet(null, undefined)); // Output: Hello, Guest!
console.log(greet("", "")); // Output: , !
console.log(greet("", null)); // Output: Hello, !

            

              
                Copy
              
            
          

Denne tilgang sikrer, at funktionen altid har en værdi at arbejde med, selvom den, der kalder funktionen, ikke angiver alle argumenterne.

4. Internationalisering og lokalisering (i18n/l10n)

Når man arbejder med internationaliserede applikationer, har man ofte forskellige oversættelser for diverse strenge. Nullish coalescing kan bruges til at levere en standardoversættelse, hvis en specifik oversættelse mangler for et bestemt sprog.

            const translations = {
  en: {
    greeting: "Hello",
    farewell: "Goodbye"
  },
  fr: {
    greeting: "Bonjour"
  }
};

function translate(key, language) {
  return translations[language]?.[key] ?? translations.en[key] ?? `Oversættelse mangler for nøgle: ${key}`;
}

console.log(translate("greeting", "fr")); // Output: Bonjour
console.log(translate("farewell", "fr")); // Output: Oversættelse mangler for nøgle: farewell
console.log(translate("greeting", "de")); // Output: Hello (falder tilbage til engelsk)

            

              
                Copy
              
            
          

I dette eksempel forsøger vi først at finde oversættelsen for det angivne sprog og nøgle. Hvis den mangler, falder vi tilbage til den engelske oversættelse. Hvis selv den engelske oversættelse mangler, returnerer vi en besked, der indikerer, at oversættelsen mangler.

5. Håndtering af brugerinput i formularer

Når man behandler brugerinput fra formularer, kan man støde på tilfælde, hvor visse felter er efterladt blanke eller indeholder tomme strenge. Brug af nullish coalescing-operatoren i kombination med optional chaining-operatoren (?.) kan være meget effektivt, når man arbejder med dybt indlejret brugerinput.

            const formData = {
  user: {
    name: "",
    address: {
      city: null,
      country: undefined
    }
  }
};

const userName = formData.user.name || "Intet navn angivet";
const safeUserName = formData?.user?.name ?? "Intet navn angivet";
const userCity = formData?.user?.address?.city ?? "By ukendt";
const userCountry = formData?.user?.address?.country ?? "Land ukendt";

console.log(userName); // Intet navn angivet (fordi tom streng er falsy)
console.log(safeUserName); // "" (fordi safeUserName eksplicit tjekker for null eller undefined)
console.log(userCity); // By ukendt
console.log(userCountry); // Land ukendt

            

              
                Copy
              
            
          

Operatorpræcedens og kombination med andre operatorer

Nullish coalescing-operatoren har en relativt lav operatorpræcedens. Det betyder, at du ofte bliver nødt til at bruge parenteser for at sikre, at den evalueres korrekt, især når den kombineres med andre operatorer som logisk OG (&&) eller logisk ELLER (||).

Vigtig bemærkning: Du kan ikke direkte kombinere ?? med && eller || uden at bruge parenteser. Dette er for at undgå tvetydighed i rækkefølgen af operationer.

Korrekt brug:

            const value = (someValue ?? 10) && true;
console.log(value); //Output: true hvis someValue ikke er null eller undefined, ellers false

const result = (null ?? 5) + 10; // Output: 15

            

              
                Copy
              
            
          

Forkert brug (Vil resultere i en SyntaxError):

            // const value = someValue ?? 10 && true; // SyntaxError: Unexpected token '&&'

// const result = null ?? 5 + 10; // SyntaxError: Unexpected number

            

              
                Copy
              
            
          

Browserkompatibilitet

Nullish coalescing-operatoren (??) er en relativt ny tilføjelse til JavaScript. Sørg for, at dine mål-browsere understøtter den. De fleste moderne browsere understøtter den, men ældre browsere kan kræve transpilation ved hjælp af værktøjer som Babel.

Til at tjekke browserkompatibilitet kan du henvise til ressourcer som MDN Web Docs.

Bedste praksis for brug af Nullish Coalescing

• Brug den, når du skal skelne mellem manglende værdier (null eller undefined) og gyldige falsy værdier.
• Brug altid parenteser, når du kombinerer ?? med && eller || for at undgå syntaksfejl og sikre korrekt evaluering.
• Vær opmærksom på browserkompatibilitet og overvej transpilation, hvis det er nødvendigt.
• Dokumenter din brug af ?? tydeligt for at forbedre kodens læsbarhed.
• Test din kode grundigt for at sikre, at standardværdier tildeles korrekt i alle scenarier.

Konklusion

Nullish coalescing-operatoren (??) er en kraftfuld og værdifuld tilføjelse til JavaScript-sproget. Den giver en mere præcis og pålidelig måde at tildele standardværdier på sammenlignet med den traditionelle logiske ELLER-operator (||), især når man håndterer falsy værdier. Ved at forstå dens nuancer og bedste praksis kan du skrive renere, mere robust og mere vedligeholdelsesvenlig JavaScript-kode. Overvej at tage ?? i brug i dine projekter for at forbedre klarheden og nøjagtigheden af dine tildelinger af standardværdier. Husk at teste din kode grundigt på tværs af forskellige browsere og overvej transpilation for ældre miljøer.

Denne guide gav et omfattende overblik. Eksperimenter med ?? i forskellige sammenhænge for fuldt ud at forstå dens kapabiliteter og begrænsninger, og forfin løbende din forståelse gennem praktisk anvendelse.